﻿import React from 'react';
import Header from './Header';
import {Pagination} from 'antd';
import action from '../../store/actions/historyPurchase';
import {connect} from 'react-redux';
import {Input, Button} from 'antd';
import PurchaseList from './PurchaseList';
import './HistoryPurchase.scss';

const {Search} = Input;

class HistoryPurchase extends React.Component {
  state = {
    invcode_stock: ''
  };

  componentDidMount() {
    const {current, GET_HISTORY_PURCHASE_LIST} = this.props;
    GET_HISTORY_PURCHASE_LIST();
  }

  // 分页改变
  pageChange = async page => {
    const {GET_HISTORY_PURCHASE_LIST} = await this.props;
    // 分页改变事件
    await GET_HISTORY_PURCHASE_LIST(page, this.state.invcode_stock);

  };
  // 搜索点击事件
  onSearch = value => {
    this.props.GET_HISTORY_PURCHASE_LIST(1, value);
    this.setState({
      invcode_stock: value
    });
  };
  clear = () => {
    this.setState({
      invcode_stock: ''
    });
    this.props.GET_HISTORY_PURCHASE_LIST(1);
  };

  render() {
    return (
      <div>
        <Header/>
        <div className={'search'} style={{width: '400px', marginLeft: '30px', marginTop: '10px', marginBottom: '10px'}}>
          <Search
            placeholder="请输入物料编码......"
            onSearch={value => this.onSearch(value)}
            onChange={(e) => this.setState({invcode_stock: e.target.value})}
            value={this.state.invcode_stock}
            enterButton
          />
          <Button className={'clear'} type="primary" onClick={this.clear}>清除筛选</Button>
        </div>
        <PurchaseList purchaseList={this.props.purchaseList}/>
        <Pagination
          current={this.props.current}
          onChange={this.pageChange}
          total={this.props.pageCount ? this.props.pageCount : 1}
          style={{textAlign: 'center', marginTop: '20px'}}
          pageSize={10}
          hideOnSinglePage
        />
      </div>
    );
  }
}

const mapDispatchToProps = state => state.historyPurchase;
export default connect(mapDispatchToProps, action)(HistoryPurchase);
